<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="巡更打卡"
      color="#1F1F1F"
      left-icon="left"
      @clickLeft="onBack"
    >
    </uni-nav-bar>
    <view class="formBox">
      <uni-forms
        ref="valiForm"
        :rules="rules"
        v-model="formData"
        label-position="top"
        label-width="150"
      >
        <uni-forms-item label="附件" required name="ossIdArrStr">
          <FileUploader v-model="formData.ossIdArrStr" />
        </uni-forms-item>
        <uni-forms-item label="是否有异常" required name="isAbnormal">
          <uni-data-checkbox
            v-model="formData.isAbnormal"
            :localdata="isYesNo"
          />
        </uni-forms-item>
        <uni-forms-item
          label="异常情况说明"
          required
          name="abnormalSituation"
          v-if="formData.isAbnormal == 1"
        >
          <uni-easyinput
            type="textarea"
            v-model="formData.abnormalSituation"
            placeholder="请输入"
          />
        </uni-forms-item>
      </uni-forms>
      <button class="btn" type="primary" @click="onSubmit('valiForm')">
        提交
      </button>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { netRoundsCheck } from '@/api/patrol';
import FileUploader from '@/components/FileUploader/index.vue';
export default {
  components: {
    FileUploader,
  },
  data() {
    return {
      myErr: '暂无',
      // 表单数据
      formData: {},
      isYesNo: [
        {
          text: '是',
          label: '是',
          value: '1',
        },
        {
          text: '否',
          label: '否',
          value: '0',
        },
      ],
      // 规则
      rules: {
        ossIdArrStr: {
          rules: [
            {
              required: true,
              errorMessage: '请上传现场照片等附件内容',
            },
          ],
        },
        abnormalSituation: {
          rules: [
            {
              required: true,
              errorMessage: '请填写异常内容',
            },
          ],
        },
        isAbnormal: {
          rules: [
            {
              required: true,
              errorMessage: '请选择是否有异常',
            },
          ],
        },
      },
    };
  },
  watch: {
    'formData.userId': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  onLoad(query) {
    // 小程序才需要解码
    // if (query.scene) {
    //   // 解码
    //   let path = decodeURIComponent(query.scene);
    //   // 取url路径参数
    //   const params = _.split(path, '?');
    //   let formattedParams = _.chain(params[params.length - 1])
    //     .split('&')
    //     .map(_.ary(_.partial(_.split, _, '='), 1))
    //     .fromPairs()
    //     .value();
    //   this.query = formattedParams;
    // }
    if (Object.keys(query).length) {
      // 解码
      this.query = query;
    }
  },
  methods: {
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          // loading提示
          uni.showLoading({ title: '操作中' });
          netRoundsCheck({
            ...res,
            spaceId: this.query.id,
            ossIdArrStr: res.ossIdArrStr.map((item) => item.ossId).join(),
          }).then((res) => {
            uni.hideLoading();
            uni.showToast({
              title: `提交成功`,
              duration: 2000,
            });
            // 重置
            let timer = null;
            timer = setTimeout(() => {
              this.onReset();
              this.onBack();
              clearTimeout(timer);
            }, 2000);
          });
        })
        .catch((err) => {
          console.log('err', err);
          if (Array.isArray(err)) {
            this.myErr = err[0].errorMessage;
          }
        });
    },
    // 重置表单
    onReset() {
      this.formData = this.$options.data().formData;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  .formBox {
    padding: 60rpx 48rpx 100rpx;
    background: #fff;
    overflow: hidden;
    .uni-forms {
      min-height: 38vh;
    }
    .myLabel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .star {
        color: #dd524d;
      }
    }
  }
}
</style>
